<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";

const tableData = ref([])


const userToken = ref(localStorage.getItem('user-token')?
    JSON.parse(localStorage.getItem('user-token')):null);

onMounted(()=>{
  if (userToken.value == null) {
    ElMessage.error("请先登录!");
    router.push('/patient/login');
    return;
  }
  axios.defaults.headers.common['Authorization']=userToken.value;

  getDepartment(currentPage.value);
})
const getDepartment =(pageNum)=>{
  axios.get(BASE_URL+'/v1/department/select/pageNum='+pageNum).then((response)=>{
    if (response.data.code===20000){
      tableData.value = response.data.data.list;
      total.value = response.data.data.maxPage;
    }
  })
}
const departmentName = ref();

const getDepartmentByName = () => {
  if (departmentName.value==null||departmentName.value===''){
    ElMessage.error('请输入科室名字!')
    getDepartment(currentPage.value);
    return
  }
  axios.get(BASE_URL+"/v1/department/selectByName/"+departmentName.value).then((response)=>{
    if (response.data.code===20000){
      tableData.value = response.data.data;
    }else ElMessage.error(response.data.message);
  })
}
const searchLastWeek=()=>{
  if (confirm('您确定要查询7天成立的科室吗?')){
    axios.get(BASE_URL+'/v1/department/searchLastWeek/'+currentPage.value).then((response)=>{
      if (response.data.code===20000) {
        ElMessage.success('查询完成!');
        tableData.value = response.data.data.list;
        total.value = response.data.data.maxPage;
      }
    })
  }
}
const searchToday=()=>{
  if (confirm('您确定要查询7天成立的科室吗?')){
    axios.get(BASE_URL+'/v1/department/searchToday/'+currentPage.value).then((response)=>{
      if (response.data.code===20000) {
        ElMessage.success('查询完成!');
        tableData.value = response.data.data.list;
        total.value = response.data.data.maxPage;
      }
    })
  }
}

const searchLastMonth=()=>{
  if (confirm('您确定要查询30天成立的科室吗?')){
    axios.get(BASE_URL+'/v1/department/searchLastMonth/'+currentPage.value).then((response)=>{
      if (response.data.code===20000) {
        ElMessage.success('查询完成!');
        tableData.value = response.data.data.list;
        total.value = response.data.data.maxPage;
      }
    })
  }
}

const del=(i,department)=>{
  if (confirm('您确定要删除这间科室吗?')){
    axios.post(BASE_URL+'/v1/department/'+department.id+'/delete').then((response)=>{
      if (response.data.code===20000) {
        getDepartment(currentPage);
        ElMessage.success('删除完成!');
      }
    })
  }
}
const check = (department)=>{
  router.push('/newDepartment?id='+department.id);
}
const change = (department)=>{
  router.push('/newDepartment?Id='+department.id);
}
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getDepartment(val);
}
const currentPage = ref(1)
const total = ref()
</script>

<template>
  <el-card style="height: 75px;width: 1645px" >
    <el-container >
      <el-row style="width: 100%;height: 100%">

        <el-col :span="5" style="padding-top:5px ;margin: 0 auto">
          <span style="text-align: left">部门名称</span>
          <el-input v-model="departmentName" style="width: 200px; margin-left: 5px" placeholder="请输入部门的名字"></el-input>
        </el-col>

        <el-col :span="12">
          <el-row style="padding-top: 5px">
            <el-col :span="3"><div style="color: gray;line-height: 30px">创建时间</div></el-col>
            <el-col :span="2">
              <el-button @click="searchToday()" class="headerButton">今天</el-button>
            </el-col>
            <el-col :span="3">
              <el-button @click="searchLastWeek()" class="headerButton">最近7天</el-button>
            </el-col>
            <el-col :span="3">
              <el-button @click="searchLastMonth()" class="headerButton">最近一个月</el-button>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="6">
          <el-row >
            <el-button type="success" @click="getDepartmentByName()">搜索</el-button>
            <el-button type="primary" @click="router.push('/newDepartment')">新增科室</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-container>
  </el-card>

  <el-card style="margin-top:10px ;width: 1645px;height:813px" >
    <el-table :data="tableData" style="width: 100%;text-align: left">
      <el-table-column width="50">
        <el-checkbox label="" size="large"></el-checkbox>
      </el-table-column>
      <el-table-column type="index" label="序号" width="130"/>
      <el-table-column prop="name" label="科室名称" width="180"/>
      <el-table-column prop="levelName" label="上级部门" width="180"/>
      <el-table-column prop="doctorName" label="联系人" width="150"/>
      <el-table-column prop="contactMobile" label="联系电话" width="210"/>
      <el-table-column prop="createUser" label="创建人" width="170"/>
      <el-table-column prop="gmtCreate" label="创建时间" width="210"/>
      <el-table-column prop="status" label="状态" width="165"/>
      <el-table-column prop="operate" label="操作" width="150">
        <template #default="scope">
          <el-button type="primary" class="tableButton" @click="change(scope.row)">编辑</el-button>
          <el-button type="success" class="tableButton" @click="check(scope.row)">查看</el-button>
          <el-button type="danger" class="tableButton" @click="del(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="divPagination">
      <el-pagination
          v-model:current-page="currentPage"
          layout="prev, pager, next, jumper"
          :total="total*10"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<style scoped>
.divPagination{
  margin-left: 1300px;
  margin-top: 20px
}
.tableButton{
  height: 20px ;width: 20px
}
.headerButton{
  border: none;
  line-height: 1px;
}
.headerButton:hover{
  background-color: white;
}
.headerButton:focus{
  background-color: white;
}
</style>